<template>
  <div class="ai-drawing-workflow">
    <div class="workflow-header">
      <h1>AI绘画工作流</h1>
      <div class="header-actions">
        
        <el-button type="primary" class="create-btn" @click="createWorkflow">
          <el-icon><Plus /></el-icon>
          创建
        </el-button>
      </div>
    </div>
    
    <el-row :gutter="20" class="workflow-grid">
      <el-col 
        v-for="template in templates" 
        :key="template.id" 
        :xs="24" 
        :sm="12" 
        :md="8" 
        :lg="6"
      >
        <div class="template-card">
          <img 
            :src="template.preview_image" 
            class="template-image"
            :alt="template.name"
          >
          <div class="template-content">
            <h3>{{ template.name }}</h3>
            <p class="description">{{ template.description }}</p>
            <div class="template-meta">
              <span>作者: {{ template.author }}</span>
            </div>
            <div class="template-actions">
              <el-button 
                type="primary" 
                size="small"
                class="use-btn"
                @click="useTemplate(template)"
              >
                使用
              </el-button>
              <el-button 
                plain
                size="small"
                class="detail-btn"
                @click="viewTemplateDetails(template)"
              >
                详情
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from 'vue';
import { useRouter } from 'vue-router';
import { Picture, Plus } from '@element-plus/icons-vue';

// 获取主题状态
const isDark = inject('isDark', ref(false));

interface Template {
  id: string;
  name: string;
  description: string;
  preview_image: string;
  author: string;
  category: string;
}

const router = useRouter();
const templates = ref<Template[]>([
  {
    id: '1',
    name: '11',
    description: '11的描述内容',
    preview_image: '/placeholder.jpg',
    author: '文生图',
    category: '基础'
  },
  {
    id: '2',
    name: '风景写实画',
    description: '生成逼真风景照片',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '写实'
  },
  {
    id: '3',
    name: '概念艺术',
    description: '生成艺术概念设计图',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '艺术'
  },
  {
    id: '4',
    name: '肖像摄影',
    description: '生成逼真的人像照片',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '摄影'
  },
  {
    id: '5',
    name: '油画风格',
    description: '中西结合的油画风格',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '绘画'
  },
  {
    id: '6',
    name: '3D渲染',
    description: '生成3D建模渲染',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '3D'
  },
  {
    id: '7',
    name: '水彩画',
    description: '生成水彩画风格的图',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '绘画'
  },
  {
    id: '8',
    name: '像素艺术',
    description: '生成复古像素风格的图',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '像素'
  },
  {
    id: '9',
    name: '食物照片',
    description: '生成美食类风格照片',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '食物'
  },
  {
    id: '10',
    name: '建筑设计',
    description: '生成建筑设计效果图',
    preview_image: '/placeholder.jpg',
    author: 'admin',
    category: '建筑'
  }
]);

// 跳转到画作页面
const goToArtworks = () => {
  router.push('/artworks');
};

// 创建工作流
const createWorkflow = () => {
  router.push('/workflow/create');
};

// 使用模板
const useTemplate = (template: Template) => {
  router.push(`/templates/text2img?id=${template.id}`);
};

// 查看模板详情
const viewTemplateDetails = (template: Template) => {
  router.push(`/templates/showcase?id=${template.id}`);
};

onMounted(() => {
  // 加载数据逻辑
  console.log('加载AI绘画工作流模板');
});
</script>

<style lang="scss" scoped>
.ai-drawing-workflow {
  padding: 16px;
  background-color: var(--bg-color);
  min-height: calc(100vh - 60px);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  
  .workflow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: var(--text-color);
      transition: color 0.3s;
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .workflow-grid {
    margin-bottom: 24px;
  }
  
  .template-card {
    background-color: var(--bg-color-secondary);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
    transition: transform 0.2s, box-shadow 0.3s, background-color 0.3s;
    border: 1px solid var(--border-color);
    
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .template-image {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }
    
    .template-content {
      padding: 16px;
      
      h3 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 500;
        color: var(--text-color);
        transition: color 0.3s;
      }
      
      .description {
        color: var(--text-color-secondary);
        font-size: 14px;
        margin: 0 0 12px;
        height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: color 0.3s;
      }
      
      .template-meta {
        color: var(--text-color-secondary);
        font-size: 12px;
        margin-bottom: 12px;
        transition: color 0.3s;
      }
      
      .template-actions {
        display: flex;
        gap: 8px;
        
        .use-btn, .detail-btn {
          flex: 1;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .ai-drawing-workflow {
    .workflow-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      
      .header-actions {
        width: 100%;
        justify-content: space-between;
      }
    }
  }
}
</style> 